<template>
  <div>
    <!-- 个人信息 -->
    <div class="h-top clearfloat box-s">
      <div class="ge-back"><img src="./img/text-bck.png" /></div>
      <div class="mui-tus">
        <div class="huiyuan-text">
          <img :src="urlStr" />
          <div class="content clearfloat" v-if="loginStatus">
            <p class="hname">昵称：{{ user.userName }}</p>
          </div>
          <a
            v-else
            class="content clearfloat"
            style="font-size: 0.5rem; color: #fff; display: block"
            @click="loginOnclik"
          >
            登录/注册
          </a>
        </div>

        <ul>
          <li>
            <a href="#" v-if="loginStatus">
              <p>{{ fabunum }}</p>
              <span>我的发布</span>
            </a>
            <a href="javascript:;" v-else>
              <p>0</p>
              <span>我的发布</span>
            </a>
          </li>
          <span class="right-lines"></span>
          <li>
            <a href="#" v-if="loginStatus">
              <p>{{ qiugounum }}</p>
              <span>我的求购</span>
            </a>
            <a href="javascript:;" v-else>
              <p>0</p>
              <span>我的求购</span>
            </a>
          </li>
          <span class="right-lines"></span>
          <li>
            <a href="#" v-if="loginStatus">
              <p>10</p>
              <span>我的收藏</span>
            </a>
            <a href="javascript:;" v-else>
              <p>0</p>
              <span>我的收藏</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 交易模块 -->
    <div class="my_sprice">
      <div>
        <van-grid square :border="false" v-if="loginStatus">
          <van-grid-item
            icon="photo-o"
            text="我发布的"
            :to="{ name: 'myfabu' }"
          />
          <van-grid-item
            icon="photo-o"
            text="我求购的"
            :to="{ name: 'myqiu' }"
          />
        </van-grid>
      </div>
      <van-cell title="客服中心" is-link @click="openkefu" />
      <van-cell title="举报中心" is-link @click="openkefu" />
    </div>
    <!-- 登录退出 -->
    <div class="loginBut">
      <van-button type="info" block v-if="loginStatus" @click="outLogin"
        >退出登录</van-button
      >

      <van-button type="info" block v-else @click="loginOnclik"
        >点击登录/注册</van-button
      >
      <van-button type="info" block v-if="sessionid" to="/admin/cate"
        >分类管理</van-button
      >
    </div>
    <!-- 客服弹出面板 -->

    <van-dialog v-model="showite" title="联系客服" show-cancel-button>
      <div class="tanchu">
        <div class="ly-right2">
          <!-- 微信 -->
          <a href="javascript:void(0);"></a>
          <button
            @click="weixinClick"
            class="weixinKefu id-show__wx"
            data-clipboard-text="lxx_bbs"
          >
            复制微信号
          </button>
        </div>
        <div class="ly-right">
          <a href="javascript:void(0);" @click="onClickKefu"></a>
          <button
            @click="qqClick"
            class="QQaKefu id-show__qq"
            data-clipboard-text="418005852"
          >
            复制QQ号
          </button>
        </div>
      </div>
      <van-divider>点击QQ图标直接跳转</van-divider>
    </van-dialog>
  </div>
</template>


<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import Clipboard from "clipboard";

export default {
  name: "ToutiaoMy",

  components: {},

  directives: {},

  data() {
    return {
      show: false,
      sessionid: false,
      user: {
        userName: "王小二",
        userID: "1",
        userQq: "418005852",
        userNan: "高二",
      },
      urlStr: "https://thirdqq.qlogo.cn/g?b=qq&nk=418005852&s=100",
      code: "",
      userJson: {},
      winUrl: "",
      message: "",
      loginStatus: false,
      fabunum: "",
      qiugounum: "",
      showite: false,
    };
  },
  mounted() {},
  created() {
    if (localStorage.getItem("id")) {
      if (localStorage.getItem("id") === "7B911CAF87B3425F87C7377F9A9F2566") {
        this.sessionid = true;
      } else {
        this.sessionid = false;
      }
      this.loginStatus = true;
      this.getUser();
      this.fabuNum();
      this.qiugouNum();
    }
  },
  methods: {
    openkefu() {
      this.showite = true;
    },
    // 点击微信图标
    weixinClick() {
      var clipboard = new Clipboard(".id-show__wx");
      clipboard.on("success", (e) => {
        Toast.success("复制微信号成功");
        // 释放内存
        clipboard.destroy();
        this.showite = false;
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制微信号错误");
        // 释放内存
        clipboard.destroy();
      });
    },
    // 客服
    onClickKefu() {
      var qq = 418005852;

      var u = navigator.userAgent;

      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

      if (isiOS) {
        if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
          window.open(
            "http://wpa.qq.com/msgrd?v=3&uin=" + qq + "&site=qq&menu=yes"
          );
        } else {
          window.open(
            "mqqwpa://im/chat?chat_type=wpa&uin=" +
              qq +
              "&version=1&src_type=web&web_src=cmgytt.top"
          );
        }
      } else {
        if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
          window.open(
            "http://wpa.qq.com/msgrd?v=3&uin=" + qq + "&site=qq&menu=yes"
          );
        } else {
          window.open(
            "mqqwpa://im/chat?chat_type=wpa&uin=" +
              qq +
              "&version=1&src_type=web&web_src=cmgytt.top"
          );
        }
      }
    },
    qqClick() {
      var clipboard = new Clipboard(".id-show__qq");
      clipboard.on("success", (e) => {
        Toast.success("复制QQ号成功");
        // 释放内存
        clipboard.destroy();
        this.showite = false;
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        Toast.fail("复制QQ号错误");
        // 释放内存
        clipboard.destroy();
      });
    },
    loginOnclik() {
      this.$router.push("/login");
    },
    async getUser() {
      const { data: res } = await this.$http.get(
        `/api/user/${localStorage.getItem("id")}`
      );
      //console.log(res);
      this.user.userName = res.data.userName;
      localStorage.setItem("username", res.data.userName);
      this.user.userID = res.data.userId;
      let qq = res.data.email.split("@")[0];
      this.urlStr = `https://thirdqq.qlogo.cn/g?b=qq&nk=${qq}&s=100`;
      localStorage.setItem("userurl", this.urlStr);
    },
    outLogin() {
      Toast("退出登录");
      this.loginStatus = false;
      localStorage.clear();
    },
    async fabuNum() {
      let ste = {
        userId: localStorage.getItem("id"),
      };
      const { data: res } = await this.$http.get("/api/goods/list", {
        params: ste,
      });
      this.fabunum = res.data.length;
    },
    async qiugouNum() {
      let ste = {
        userId: localStorage.getItem("id"),
      };
      const { data: res } = await this.$http.get("/api/needs/list", {
        params: ste,
      });
      this.qiugounum = res.data.length;
    },
  },
};
</script>

<style lang="less" scoped>
.h-top {
  position: relative;
  width: 100%;
  height: 6.8rem;
  /* background-color: #25cb83; */
  /* background: url(../img/text-bck.png) no-repeat center; */
  padding: 0.4rem;
}
.box-s {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.clearfloat {
  zoom: 1;
}
.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}
.h-top .ge-back img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
}
.weixinKefu {
  display: inline-block;
  width: 2.29333rem;
  padding: 0.10667rem;
  border-radius: 0.26667rem;
  position: absolute;
  right: 3.36rem;
  top: 1.57333rem;
  font-size: 0.37333rem;
  color: #fff;
  background-color: #1296db;
}
.clearfix:after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.QQaKefu {
  display: inline-block;
  width: 2.29333rem;
  padding: 0.10667rem;
  border-radius: 0.26667rem;
  position: absolute;
  right: 3.36rem;
  top: 2.93333rem;
  font-size: 0.37333rem;
  color: #fff;
  background-color: #1296db;
}
img {
  border: 0;
}
.mui-tus {
  position: absolute;
  bottom: 77px;
  padding: 0 0.6rem;
}
.huiyuan-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.huiyuan-text > img {
  border-radius: 15px;
}
.h-top img {
  width: 23%;
  height: 80px;
}
.mui-tus ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: center;
  margin-top: 8%;
}
ul {
  list-style: none;
}
.h-top .content {
  position: relative;
  width: 60%;
  margin-left: 5%;
  padding-top: 20px;
  color: #fff;
}
.h-top .content p.hname {
  font-size: 0.5rem;
}
.h-top .content p.hpthy {
  font-size: 0.4rem;
}
.mui-tus ul li {
  /* width: 33.333%; */
  margin-left: 20px;
  text-align: center;
}
a {
  text-decoration: none;
  color: #007aff;
}

a {
  background: 0 0;
}
a,
button,
textarea,
select {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}
a {
  text-decoration: none;
  outline: none;
}
.mui-tus ul li p {
  color: #fff;
  font-size: 0.5rem;
}
.mui-tus ul li span {
  color: #b3daff;
  font-size: 0.4rem;
}
.tanchu .ly-right2 {
  padding-left: 20px;
  width: 40px;
  height: 50px;
}
.tanchu .ly-right2 a {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: url("./img/icon_weichat.png") no-repeat center;
  background-size: 40px auto;
}
.tanchu .ly-right {
  padding-left: 20px;

  width: 40px;
  height: 50px;
}
.tanchu .ly-right a {
  display: inline-block;
  width: 40px;
  height: 50px;
  background: url("./img/icon_QQ.png") no-repeat center;
  background-size: 40px auto;
}
.mui-tus ul .right-lines {
  height: 0.8rem;
  margin-top: 0.3rem;
  margin-left: 20px;
  border: 0.01rem solid #e2e2e2;
}
.clearfloat:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}
.userId {
  color: #fff;
  position: absolute;
  left: 4px;
  top: 2px;
  font-size: 16px;
}

.my_sprice {
  position: relative;
  margin: -14px 18px;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.van-grid {
  margin-top: 9px;
}
.loginBut {
  margin: 24px 18px;
}
</style>